<template>
  <div>
    <div class="details" v-if="recipeList.length != 0">
      <!-- 顶部导航 -->
      <div :class="['details-nav', { cur: showBgColor }]">
        <div class="nav-left">
          <i
            class="iconfont icon-xiangzuojiantou"
            @click="$router.go('-1')"
          ></i>
        </div>
        <div class="nav-center" v-if="isShow == true">
          <div class="img">
            <img :src="recipeList.user.avatar_medium" alt="" />
          </div>
          <div class="nav-follow" v-if="!isFollow">
            <span @click="follow()">关注</span>
          </div>
          <div class="nav-followed" v-if="isFollow">
            <span @click="follow()">已关注</span>
          </div>
        </div>
        <div class="nav-right">
          <i class="iconfont icon-pengyouquan"></i>
          <i class="iconfont icon-weixin"></i>
          <i class="iconfont icon-fenxiang" @click="showShare = true"></i>
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
          />
        </div>
      </div>
      <!-- 头部内容 -->
      <div class="details-header">
        <!-- 图片 -->
        <div class="header-img" v-if="!recipeList.vfurl" ref="bg_img">
          <img :src="recipeList.original_photo_path" alt="" />
        </div>
        <!-- 视频 -->
        <div class="header-video" v-if="recipeList.vfurl" ref="bg_img">
          <video
            width="375"
            height="auto"
            controls
            :src="recipeList.vfurl"
          ></video>
        </div>
        <div class="header-content" ref="header_content">
          <h3>{{ recipeList.title }}</h3>
          <span
            >精品 · 浏览 {{ recipeList.views_count_text }}· 收藏
            {{ recipeList.vc }}</span
          >
        </div>
        <div class="header-user" ref="header_user">
          <div class="user-left">
            <div class="left-img" v-if="recipeList.user.avatar_medium">
              <img :src="recipeList.user.avatar_medium" alt="" />
            </div>
            <div class="left-nickname">
              <span>{{ recipeList.user.nickname }}</span>
              <span>Lv.{{ recipeList.user.lvl }}</span>
            </div>
          </div>
          <div class="user-right">
            <div class="right-follow" v-if="!isFollow">
              <span @click="follow(recipeList.user.user_id)">关注</span>
            </div>
            <div class="right-followed" v-if="isFollow">
              <span @click="follow(recipeList.user.user_id)">已关注</span>
            </div>
          </div>
        </div>
        <div class="header-title">
          <span>
            {{ recipeList.cookstory }}
          </span>
        </div>
        <div class="header-footer" v-if="recipeList.cook_difficulty">
          <div class="footer-left">
            <i class="iconfont icon-shijian"></i>
            <span>{{ recipeList.cook_time }}</span>
          </div>
          <div class="footer-right">
            <div class="right-img">
              <img :src="recipeList.cook_difficulty_image" alt="" />
            </div>
            <span>{{ recipeList.cook_difficulty }}</span>
          </div>
        </div>
      </div>
      <!-- 食物清单 -->
      <div class="details-foodList">
        <div class="foodList-title">
          <span>食物清单</span>
          <span v-if="isFootList == false">加入采购清单</span>
          <span v-if="isFootList == true">移除采购清单</span>
        </div>
        <ul class="foodList-content">
          <li v-for="(item, index) in recipeList.major" :key="index">
            <span>{{ item.title }}</span>
            <span>{{ item.note }}</span>
          </li>
        </ul>
      </div>
      <!-- 烹饪步骤 -->
      <div class="details-cookingSteps">
        <div class="cookingSteps-title">
          <span>烹饪步骤</span>
          <span>点击图片进入烹饪模式</span>
        </div>
        <ul class="cookingSteps-content">
          <li v-for="(item, index) in recipeList.cookstep" :key="index">
            <h3>步骤{{ index + 1 }}/{{ recipeList.cookstep.length }}</h3>
            <div class="content-img">
              <img :src="item.image" alt="" />
            </div>
            <span>{{ item.content }}</span>
          </li>
          <div class="content-footer">
            <span>成品</span>
            <span>{{ recipeList.create_time }}</span>
          </div>
        </ul>
      </div>
      <!-- 评评论区 -->
      <div class="details-comment" v-if="commentsList">
        <div class="comment-title">
          <h3>热门评论</h3>
          <span>{{ commentsList.length }}条评论</span>
        </div>
        <ul class="comment-content" v-if="commentsList.length != 0">
          <li v-for="(item, index) in commentsList" :key="index">
            <div class="content-header">
              <div class="header-left">
                <div class="left-img">
                  <img :src="item.u.p" alt="" />
                </div>
                <span>{{ item.u.n }}</span>
                <span>LV.{{ item.u.lvl }}</span>
              </div>
              <div class="header-right">
                <i class="iconfont icon-aixin" @click="fabulous($event)"></i>
                <span>赞</span>
              </div>
            </div>
            <div class="content-text">
              <span>{{ item.content[0].c }}</span>
            </div>
          </li>
        </ul>
        <div class="commentNull" v-if="commentsList.length == 0">
          <span>暂无评论</span>
        </div>
      </div>
      <!-- 底部评论导航 -->
      <div class="details-footerNav">
        <div class="footerNav-left">
          <input
            type="text"
            placeholder="说点什么"
            v-model="c"
            @keyup.enter="add()"
          />
        </div>
        <div class="footerNav-commends">
          <i class="iconfont icon-pinglun"></i>
          <span @click="showPopup()">评论</span>
        </div>
        <div class="footerNav-collection">
          <i class="iconfont icon-shoucang" @click="collection($event)"></i>
          <span>收藏</span>
        </div>
        <div class="footerNav-fabulous">
          <i class="iconfont icon-aixin"></i>
          <span>点赞</span>
        </div>
      </div>
    </div>
    <!-- 全部评论 -->
    <van-popup
      v-model="show"
      closeable
      round
      position="bottom"
      :style="{ height: '70%' }"
    >
      <div class="comments" v-if="commentsList">
        <div class="comments-title">
          <span>全部评论 ({{ commentsList.length }})</span>
        </div>
        <div class="comments-content" v-if="commentsList.length == 0">
          <div class="null">
            <span>暂无评论</span>
          </div>
        </div>
        <ul class="comments-contents" v-if="commentsList.length != 0">
          <li v-for="(item, index) in commentsList" :key="index">
            <div class="contents-header">
              <div class="header-left">
                <div class="left-img">
                  <img :src="item.u.p" alt="" />
                </div>
                <span>{{ item.u.n }}</span>
                <span>LV.{{ item.u.lvl }}</span>
              </div>
              <div class="header-right">
                <i class="iconfont icon-aixin" @click="fabulous($event)"></i>
                <span>赞</span>
              </div>
            </div>
            <div class="contents-text">
              <span>{{ item.content[0].c }}</span>
            </div>
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getRecipeDetail, getFlatcomments } from "../../api/home/details";
import { Toast } from "vant";
export default {
  props: ["id"],
  data() {
    return {
      isShow: false, //控制头部导航是否显示个人信息
      isFootList: false, //切换加入/移除采购清单
      isFollow: false, //关注、取消关注
      recipeid: "", //菜谱id
      recipeList: [], //菜谱数据
      show: false, //控制
      commentsList: [], //菜谱评论数据
      content: [], //发送评论的内容数组
      u: {
        n: "孤城·影",
        p: "http://p1.music.126.net/KuCKatwM2ApNNXHLHX2g2w==/109951166688773276.jpg",
        lvl: 8,
        id: "66668888",
      }, //个人信息
      c: "", //评论内容
      mycomments: [], //我的评论
      followList: [], //关注列表
      collectionList: [], //收藏列表
      showBgColor: false, //控制类名
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    //获取菜谱详情数据
    getRecipeDetailFun() {
      getRecipeDetail({ recipeid: this.id }).then((data) => {
        // console.log("美食详情数据", data.result.recipe);

        this.recipeList = data.result.recipe;
      });
    },
    //获取菜谱评论数据
    getFlatcommentsFun() {
      getFlatcomments({ recipeid: this.id, offset: 0, limit: 20 }).then(
        (data) => {
          // console.log("菜谱评论数据", data.result);

          let comments = data.result.comments;
          this.commentsList = comments;
        }
      );
    },
    //关注
    follow() {
      if (this.isFollow == false) {
        this.isFollow = true;
        Toast("已关注");

        let newFollowList = {
          id: this.recipeList.user.user_id, //菜谱id
          followList: this.recipeList.user, //将菜谱详情存入本地存储
        };
        let lists = JSON.parse(localStorage.getItem("follow") || "[]");
        lists.unshift(newFollowList);

        localStorage.setItem("follow", JSON.stringify(lists));
      } else {
        this.isFollow = false;
        Toast("取消关注");
      }
    },
    //收藏
    collection(e) {
      if (e.target.classList.contains("con")) {
        e.target.classList.remove("con");
        Toast("取消收藏");

        // window.localStorage.removeItem("collect");
      } else {
        e.target.classList.add("con");
        Toast("收藏成功");

        let newCollectionList = {
          id: this.id, //菜谱id
          collectionList: this.recipeList, //将菜谱详情存入本地存储
        };
        let lists = JSON.parse(localStorage.getItem("collect") || "[]");
        lists.unshift(newCollectionList);

        localStorage.setItem("collect", JSON.stringify(lists));
      }
    },
    //评论
    add() {
      this.content.push({ c: this.c });
      this.commentsList.push({
        id: 66668888,
        content: this.content,
        u: this.u,
      });
      this.c = "";

      let newCommentsList = {
        id: Date.now(), //随机id
        commentsList: this.commentsList, //将评论数据存入本地存储
      };
      let lists = JSON.parse(localStorage.getItem("content") || "[]");
      lists.unshift(newCommentsList);

      localStorage.setItem("content", JSON.stringify(lists));
    },
    //点赞
    fabulous(e) {
      // console.log(e.target);
      if (e.target.classList.contains("con")) {
        e.target.classList.remove("con");
        Toast("取消点赞");
      } else {
        e.target.classList.add("con");
        Toast("点赞成功");
      }
    },
    //切换加入/移除采购清单
    foodList() {
      if (this.isFootList == false) {
        this.isFootList == true;
      } else {
        this.isFootList == false;
      }
    },
    //弹出层的显示隐藏
    showPopup() {
      this.show = true;
    },
    // 滚动触发
    scrollFun() {
      // 超过高度
      let windowScroll = window.pageYOffset;
      // 图片高度
      let imgHeight = this.$refs.bg_img.offsetHeight;
      // 头部内容高度
      let contentHeight = this.$refs.header_content.offsetHeight;
      // 用户信息高度
      let userHeight = this.$refs.header_user.offsetHeight;

      let userShowHeight = imgHeight + contentHeight + userHeight * 0.6;
      // console.log(userShowHeight);
      //  超出高度大于图片高度时变色
      // console.log("滚动生效");
      // 图片超过时显示背景
      if (windowScroll > imgHeight/2) {
        this.showBgColor = true;
      } else {
        this.showBgColor = false;
      }
      // 超出高度大于指定高度时,显示用户头像
      if (windowScroll > userShowHeight) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
  },
  created() {
    this.getRecipeDetailFun();
    this.getFlatcommentsFun();
  },
  mounted() {
    window.addEventListener("scroll", this.scrollFun, true);
  },
};
</script>

<style lang="less">
.details {
  width: 100%;
  height: 100%;
  overflow: auto;
  //顶部导航
  .details-nav {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 99;
    .nav-left {
      width: 20px;
      margin-left: 22px;
      i {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
      }
    }
    .nav-center {
      width: 150px;
      display: flex;
      align-items: center;
      .img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #ccc;
        margin: 0px 15px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .nav-follow {
        margin-right: 15px;
        span {
          width: 70px;
          height: 30px;
          font-size: 12px;
          font-weight: bold;
          color: #000;
          background-color: #fec538;
          border: 1px solid #fec538;
          border-radius: 50px;
          padding: 5px 20px;
        }
      }
      .nav-followed {
        margin-right: 5px;
        span {
          width: 70px;
          height: 30px;
          font-size: 12px;
          font-weight: bold;
          color: #000;
          background-color: #d2d2d2;
          border: 1px solid #d2d2d2;
          border-radius: 50px;
          padding: 5px 18px;
        }
      }
    }
    .nav-right {
      width: 140px;
      display: flex;
      margin-left: 23px;
      margin-right: 20px;
      justify-content: space-between;
      i {
        font-size: 20px;
        color: #fff;
      }
    }
  }
  .cur {
    background-color: #fff;
    color: #000;
    i {
      color: #000 !important;
    }
  }
  //头部内容
  .details-header {
    .header-img {
      width: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .header-video {
      display: flex;
      justify-content: center;
      video {
        width: 375px;
        height: auto;
      }
    }
    .header-content {
      // height: 50px;
      margin: 20px 15px;
      h3 {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      span {
        font-size: 14px;
        color: #474747;
      }
    }
    .header-user {
      height: 80px;
      padding: 20px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user-left {
        display: flex;
        align-items: center;
        .left-img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .left-nickname {
          margin-left: 5px;
          display: flex;
          align-items: center;
          span:first-child {
            font-size: 14px;
            font-weight: bold;
            color: #000;
          }
          span:last-child {
            font-size: 14px;
            font-weight: bold;
            color: #b89a35;
            margin-left: 5px;
          }
        }
      }
      .user-right {
        .right-follow {
          span {
            width: 70px;
            height: 30px;
            font-size: 12px;
            font-weight: bold;
            color: #000;
            background-color: #fec538;
            border: 1px solid #fec538;
            border-radius: 50px;
            padding: 5px 20px;
          }
        }
        .right-followed {
          margin-right: 5px;
          span {
            width: 70px;
            height: 30px;
            font-size: 12px;
            font-weight: bold;
            color: #000;
            background-color: #d2d2d2;
            border: 1px solid #d2d2d2;
            border-radius: 50px;
            padding: 5px 18px;
          }
        }
      }
    }
    .header-title {
      margin: 15px;
      span {
        font-size: 18px;
        color: #000;
      }
    }
    .header-footer {
      height: 40px;
      margin: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .footer-left {
        font-weight: bold;
        display: flex;
        align-items: center;
        i {
          font-size: 22px;
          color: #757575;
          margin-left: 15px;
        }
        span {
          font-size: 18px;
          margin-left: 10px;
        }
      }
      .footer-right {
        display: flex;
        .right-img {
          width: 24px;
          height: 24px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        span {
          font-size: 18px;
          font-weight: bold;
          margin-left: 5px;
        }
      }
    }
  }
  //食物清单
  .details-foodList {
    margin-top: 20px;
    .foodList-title {
      margin: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span:first-child {
        font-size: 18px;
        font-weight: bold;
      }
      span:last-child {
        font-size: 13px;
        font-weight: bold;
        color: #43777c;
      }
    }
    .foodList-content {
      margin-top: 5px;
      li {
        margin: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span:first-child {
          font-size: 18px;
          color: #33a598;
        }
        span:last-child {
          font-size: 18px;
          color: #000;
        }
      }
    }
  }
  //烹饪步骤
  .details-cookingSteps {
    margin-top: 35px;
    .cookingSteps-title {
      margin: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span:first-child {
        font-size: 18px;
        font-weight: bold;
      }
      span:last-child {
        font-size: 13px;
        font-weight: bold;
        color: #43777c;
      }
    }
    .cookingSteps-content {
      margin-top: 5px;
      li {
        margin: 10px 15px;
        h3 {
          font-size: 16px;
          font-weight: bold;
          margin: 8px 0;
        }
        .content-img {
          width: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        span {
          font-size: 18px;
          margin-top: 15px;
        }
      }
      .content-footer {
        margin: 15px 15px 5px;
        display: flex;
        flex-direction: column;
        span:first-child {
          font-size: 18px;
          font-weight: bold;
        }
        span:last-child {
          font-size: 12px;
          font-weight: bold;
          color: #919191;
          margin-top: 5px;
          padding: 5px 0;
        }
      }
    }
  }
  //评评论区
  .details-comment {
    margin-top: 30px;
    padding-bottom: 70px;
    .comment-title {
      margin: 0 15px;
      display: flex;
      align-items: center;
      h3 {
        font-size: 18px;
        font-weight: bold;
      }
      span {
        font-size: 16px;
        color: #6dcfc1;
        margin-left: 5px;
      }
    }
    .comment-content {
      li {
        margin: 20px 15px 0px;
        .content-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .header-left {
            display: flex;
            align-items: center;
            .left-img {
              width: 25px;
              height: 25px;
              border-radius: 50%;
              margin: 0 5px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            span:nth-child(2) {
              font-size: 14px;
              font-weight: bold;
              margin-left: 5px;
            }
            span:nth-child(3) {
              font-size: 10px;
              font-weight: bold;
              color: #c79333;
              margin-top: 5px;
              margin-left: 5px;
            }
          }
          .header-right {
            margin-right: 10px;
            i {
              font-size: 14px;
              font-weight: bold;
              margin-right: 5px;
            }
            i.con {
              color: #ff0000;
            }
            span {
              font-size: 14px;
            }
          }
        }
        .content-text {
          margin: 15px 50px;
          span {
            font-size: 14px;
            color: #212121;
          }
        }
      }
    }
    .commentNull {
      text-align: center;
      margin-top: 20px;
      span {
        font-size: 12px;
        font-weight: bold;
        color: #8d8d8d;
      }
    }
  }
  //底部评论导航
  .details-footerNav {
    width: 100%;
    height: 70px;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .footerNav-left {
      width: 36%;
      margin: 0 15px;
      input {
        width: 100%;
        height: 35px;
        border-radius: 20px;
        border: transparent;
        background-color: #f6f6f6;
        margin-left: 5px;
        padding-left: 15px;
      }
      input:focus {
        outline: none;
      }
    }
    .footerNav-commends {
      display: flex;
      align-items: center;
      margin-right: 10px;
      i {
        font-size: 18px;
      }
      span {
        margin-left: 5px;
        font-size: 12px;
      }
    }
    .footerNav-collection {
      display: flex;
      align-items: center;
      margin-right: 10px;
      i {
        font-size: 18px;
      }
      i.con {
        color: #ffca2e;
      }
      span {
        margin-left: 5px;
        font-size: 12px;
      }
    }
    .footerNav-fabulous {
      margin-right: 15px;
      display: flex;
      align-items: center;
      i {
        font-size: 18px;
      }
      span {
        margin-left: 5px;
        font-size: 12px;
      }
    }
  }
}
//全部评论
.comments {
  .comments-title {
    height: 55px;
    border-bottom: 1px solid #f4f4f4;
    margin-top: 15px;
    span {
      font-size: 16px;
      font-weight: bold;
      margin-left: 15px;
    }
  }
  .comments-content {
    .null {
      text-align: center;
      margin-top: 30px;
      span {
        font-size: 12px;
        font-weight: bold;
        color: #8d8d8d;
      }
    }
  }
  .comments-contents {
    li {
      margin: 30px 15px 0px;
      .contents-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-left {
          display: flex;
          align-items: center;
          .left-img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin: 0 5px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          span:nth-child(2) {
            font-size: 14px;
            font-weight: bold;
            margin-left: 5px;
          }
          span:nth-child(3) {
            font-size: 10px;
            font-weight: bold;
            color: #c79333;
            margin-top: 5px;
            margin-left: 5px;
          }
        }
        .header-right {
          margin-right: 10px;
          i {
            font-size: 14px;
            font-weight: bold;
            margin-right: 5px;
          }
          i.con {
            color: #ff0000;
          }
          span {
            font-size: 14px;
          }
        }
      }
      .contents-text {
        margin: 15px 50px;
        span {
          font-size: 14px;
          color: #212121;
        }
      }
    }
  }
}
</style>